<template>
    <div>
        <div style="padding:10px 0;">
            <a-player ref="player" preload="auto" @durationchange="durationchange" :music="music" :list="musicList" listFolded listMaxHeight="200px">
            </a-player>
            <p align="left">
                <ButtonGroup shape="circle">
                    <Button type="ghost" @click="previous">
                        <Icon type="chevron-left"></Icon>
                        上一首
                    </Button>
                    <Button @click="play" type="ghost">
                        <Icon type="play"></Icon>
                        播放
                    </Button>
                    <Button @click="pause" type="ghost">
                        <Icon type="pause"></Icon>
                        暂停
                    </Button>
                    <Button @click="" type="ghost">
                        <Icon type="shuffle"></Icon>
                        切歌
                    </Button>
                    <Button type="ghost">
                        <Icon type="music-note"></Icon>
                        点播
                    </Button>
                    <Button @click="refresh" type="ghost">
                        <Icon type="refresh"></Icon>
                        刷新
                    </Button>
                    <Button type="ghost" @click="next">
                        下一首
                        <Icon type="chevron-right"></Icon>
                    </Button>
                </ButtonGroup>
            </p>
        </div>

    </div>
</template>

<script>
    import VueAplayer from 'vue-aplayer'
    export default {
        components: {
            'a-player': VueAplayer
        },
        data () {
            return {
                musicList: [],
                music: {},
                index: 0,
                autoPlay: false
            }
        },
        methods:{
            async init () {
                this.autoPlay = false
                let url = "/user/music/list"
                this.$ajax.get(url).then((response) => {
                    let {code} = response.data
                    if (code === 0) {
                        let music = {}
                        music.title = '不仅仅是喜欢'
                        music.artist = 'Silent Siren'
                        music.src = 'http://www.ytmp3.cn/down/49423.mp3'
                        music.pic = 'http://oeff2vktt.bkt.clouddn.com/image/67.jpg'
                        this.musicList.push(music)
                        music = {}
                        music.title = '灼之花'
                        music.artist = 'VOCALOID'
                        music.src = 'http://www.ytmp3.cn/down/49459.mp3'
                        music.pic = 'http://oeff2vktt.bkt.clouddn.com/image/74.jpg'
                        this.musicList.push(music)
                        music = {}
                        music.title = '眉间雪剧情版'
                        music.artist = '诺言jason'
                        music.src = 'http://www.ytmp3.cn/down/43608.mp3'
                        music.pic = 'http://oeff2vktt.bkt.clouddn.com/image/74.jpg'
                        this.musicList.push(music)
                        this.music = this.musicList[0]
                    }
                })
            },
            // 上一首
            previous () {
                if (this.index === 0) {
                    this.index = this.musicList.length
                } else {
                    this.index--
                }
                this.music = this.musicList[this.index]
                this.auto()
            },
            // 下一首
            next () {
                if ((this.index + 1) === this.musicList.length) {
                    this.index = 0
                } else {
                    this.index++
                }
                this.music = this.musicList[this.index]
                this.auto()
            },
            durationchange () {
                if (this.autoPlay) {
                    this.play()
                }
            },
            play () {
                this.$refs.player.play()
                this.auto()
            },
            auto () {
                if (!this.autoPlay) {
                    this.autoPlay = true
                }
            },
            pause () {
                this.$refs.player.pause()
            },
            refresh () {
            }
        },
        mounted () {
            this.init();
        }
    }
</script>

<style scoped>
</style>